<template>
  <div class="kw-form-item kw-form-options" :class="config.cls">
    <div class="kw-form-item-label">
      <span>{{config.name}}</span>
      <span class="desc">{{config.desc}}</span>
    </div>
    <div class="kw-form-item-content">
      <kw-tabs v-model="tabIndex">
        <kw-tab-pane name="static" label="静态数据">
          <div v-bind:class="{limitdel:defaultValue.length<=1,limitadd:defaultValue.length>=200}">
            <div v-for="(item, index) in defaultValue" class="kw-form-option" :key="index">
              <input type="text" maxlength="20" v-model="item.label" placeholder="选项名">
              <input type="text" maxlength="20" v-model="item.value" placeholder="选项值">
              <a @click="(e)=>{del(e, item, index)}" class="action action-del">
                <i class="iconfont icon-minus"></i>
              </a>
            </div>
            <a @click="handlerAddOption" style="color: #409EFF;">
              添加列
            </a>
          </div>
        </kw-tab-pane>
        <kw-tab-pane name="dynamic" label="远端数据">
          <div class="kw-form-item">
            <div class="kw-form-item-label">地址</div>
            <div class="kw-form-item-content">
              <input v-model="remote.address" placeholder="服务地址"/>
            </div>
          </div>
          <div class="kw-form-item">
            <div class="kw-form-item-label">请求方法</div>
            <div class="kw-form-item-content">
              <kw-select v-model="remote.method" :options="methods" placeholder="请求方法"></kw-select>
            </div>
          </div>
          <div v-if="remote.method === 'POST'" class="kw-form-item">
            <div class="kw-form-item-label">请求参数</div>
            <div class="kw-form-item-content">
              <kw-table :columns="columns" :data="remote.params" border></kw-table>
              <a @click="remote.params.push({key: '', value: ''})" style="color: #409EFF;">
                添加列
              </a>
            </div>
          </div>
        </kw-tab-pane>
      </kw-tabs>
    </div>
  </div>
</template>

<script>
import { CHANGE_COMPONENT_EVENT } from '../common/event'
import { prop } from '../mixins/prop'
export default {
  name: 'options-prop',
  mixins: [prop],
  props: {
    setting: {
      default() {
        return {
          options: []
        }
      }
    },
    config: {
      default: {
        prop: 'options'
      }
    }
  },
  data() {
    return {
      tabIndex: this.setting.optionType || 0,
      defaultValue: this.setting.options || [],
      optionLabel: '选项',
      remote: {
        address: '',
        method: 'POST',
        params: []
      },
      methods: [{label: 'POST', value: 'POST'}, {label: 'GET', value: 'GET'}],
      columns: [
        {title: 'key', key: 'key', width: '35%', render: this.columnRender},
        {title: 'value', key: 'value', width: '35%', render: this.columnRender},
        {title: 'action', key: 'action', width: '30%', render: this.columnActionRender}
      ]
    }
  },
  watch: {
    remote: {
      handler() {
        this.handlerPropChange()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handlerPropChange() {
      let obj = Object.assign(this.setting)
      obj.optionType = this.tabIndex
      obj[this.config.prop] = this.defaultValue
      obj.remote = this.remote
      this.$root.EventBus.$emit(CHANGE_COMPONENT_EVENT, obj)
    },
    handlerAddOption() {
      let len = this.defaultValue.length + 1
      this.defaultValue.push({
        idx: len, 
        label: this.optionLabel + len,
        value: this.optionLabel + len
      })
    },
    add(e, item, index) {
      e.stopPropagation()
      e.preventDefault()
      this.defaultValue.splice(index + 1, 0, {label: this.optionLabel + (index + 2), value: this.optionLabel + (index + 2)})
    },
    del(e, item, index) {
      e.stopPropagation()
      e.preventDefault()
      this.defaultValue.splice(index, 1)
    },
    columnRender(h, param) {
      return h('input', {
        domProps: {
          value: param.row[param.column.key]
        },
        on: {
          input: (event) => {
            param.row[param.column.key] = event.target.value
          }
        }
      })
    },
    columnActionRender(h, param) {
      return h('a', {
        style: {
          color: '#409EFF'
        },
        on: {
          click: () => {
            this.remote.params.splice(param.index, 1)
          }
        }
      }, '删除')
    }
  }
}
</script>

<style lang="less">
.kw-form-options {
  .kw-form-item-content {
    .kw-form-option {
      input {
        width: 36% !important;
        margin-right: .5rem;
      }
    }
    .limitadd .action-add,
    .limitdel .action-del {
      opacity: 0.2;
      pointer-events: none;
    }
    .action {
      .iconfont {
        background: #3c3435;
        border-radius: 50%;
        color: #fff;
        padding: 2px;
        margin: 0 3px;
        &:hover {
          background: #000;
        }
      }
    }
  }
}
</style>